import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Modal } from 'antd';
import { observer } from 'mobx-react-lite';
import { mainStore } from '../stores';
// import '../assets/CodeRealm.png'; // 图片资源不存在，暂时注释掉
import '../assets/react.svg'; // 使用已有的图片资源
// import './NavBar.css';
import './NavBar.less';

const NavBar = observer(() => {
  const navigate = useNavigate();
  const location = useLocation();

  // 路径映射数组
  const pathArr = ['market', 'upload', 'recommend', 'user'];

  // 同步导航状态与当前路由
  const syncNavWithRoute = () => {
    // 从sessionStorage中获取保存的导航状态，如果没有则使用store中的状态或默认值1
    const savedView = sessionStorage.getItem('navView') || mainStore.curView || 1;
    mainStore.changeView(parseInt(savedView));

  };

  // 在组件挂载时同步导航状态
  React.useEffect(() => {
    syncNavWithRoute();
    // console.log();
    // 当路由路径变化时，同步导航状态
    const path = location.pathname;
    for (let i = 0; i < pathArr.length; i++) {
      if (path.includes(`/home/${pathArr[i]}`)) {
        mainStore.changeView(i + 1);
        sessionStorage.setItem('navView', i + 1);
        break;
      }
    }
  }, [location.pathname]);

  // 导航切换函数
  const choseNav = (flag) => {
    navigate(`/home/${pathArr[flag - 1]}`);
    // 更新当前视图状态，使导航按钮样式正确显示
    mainStore.changeView(flag);
    // 将当前导航状态保存到sessionStorage
    sessionStorage.setItem('navView', flag);
  };

  // 处理注销按钮点击事件
  const handleLogout = () => {
    console.log('注销按钮被点击'); // 调试用
    Modal.confirm({
      title: '提示',
      content: '确定要注销登录吗？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        console.log('用户确认注销'); // 调试用
        localStorage.removeItem('token');
        localStorage.removeItem('userdata'); // 清空本地存储中的用户数据
        mainStore.userdata = {}; // 清空仓库中的用户数据
        mainStore.curView = 1; // 重置导航状态
        mainStore.selectStudent={};
        sessionStorage.removeItem('navView'); // 清空sessionStorage中的导航状态
        navigate('/login');
      }
    });
  };

  return (
    <div className="nav-shell">
      {/* 顶部栏菜单 */}
      <div className="t-nav">
        <div className="logout-btn" onClick={handleLogout}>注销</div>
        <div className="menu">
          <div className="m-bnt">
            {/* logo和名称 */}
            <div className="logo">
              <img src="/src/assets/logo.png" alt="Logo" />
              <span>知乡</span>
            </div>
          </div>
        </div>
        <div className="l-nav">
          <div className="nav">
            <span
              className={`tran-ani ${mainStore.curView === 1 ? 'navAct' : ''}`}
              onClick={() => choseNav(1)}>
              家教互助
            </span>
          </div>
          {!mainStore.userdata.isTeacher && <div className="nav">
            <span
              className={`tran-ani ${mainStore.curView === 2 ? 'navAct' : ''}`}
              onClick={() => choseNav(2)}>
              信息发布
            </span>
          </div>}
          {mainStore.userdata.isTeacher && (<div className="nav">
            <span
              className={`tran-ani ${mainStore.curView === 3 ? 'navAct' : ''}`}
              onClick={() => choseNav(3)}>
              学生推荐
            </span>
          </div>)}
          <div className="nav">
            <span
              className={`tran-ani ${mainStore.curView === 4 ? 'navAct' : ''}`}
              onClick={() => choseNav(4)}>
              个人数据
            </span>
          </div>
        </div>
      </div>
    </div>
  );
});

export default NavBar;